<template>
  <div id="category">
    <div ref="chart01" class="chart01" :xData="xData" :y1Data="y1Data" :y2Data="y2Data"></div>
  </div>
</template>

<script>
export default {
  name: 'Category',
  components: {},
  props: {
    xData: Array | Object,
    y1Data: Array | Object,
    y2Data: Array | Object,
    finishFlag: Boolean,
    name1: String,
    name2: String
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawChart01();
  },

  methods: {
    // 绘制图表
    drawChart01() {
      let that = this;
      let myChart1 = that.$echarts.init(that.$refs.chart01);
      // let myChart1 = that.$echarts.init(that.$refs[that.refId]);
      let option = {
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     backgroundColor: "#6a7985",
          //   },
          // },
          // 去掉标尺
          axisPointer: {
            type: 'none'
          }
          // axisPointer: {
          //   type: "line", // 默认为直线，可选为：'line' | 'shadow'
          // },
        },
        legend: {
          data: [that.name1, that.name2],
          icon: 'rect ',
          top: 0,
          itemWidth: 20,
          itemHeight: 3,
          itemGap: 20,
          textStyle: {
            color: '#555'
          }
          // textStyle: {
          //   color: "#888",
          //   // fontSize: 16,
          // },
        },
        grid: {
          top: '29px', // 组件离容器上侧的距离,百分比字符串或整型数字
          left: '32px', // 组件离容器左侧的距离,百分比字符串或整型数字
          right: '62px',
          bottom: '12px',
          containLabel: true //grid 区域是否包含坐标轴的刻度标签，
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.xData,
          //设置网格线颜色
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#e5e5e5'],
              width: 1,
              type: 'dashed'
            }
          },
          // x轴样式
          axisLine: {
            // show: false,
            lineStyle: {
              type: 'solid',
              color: '#e5e5e5', //左边线的颜色
              width: '1' //坐标线的宽度
            }
          },
          axisTick: {
            show: false
          },
          // x轴字体样式
          axisLabel: {
            margin: 14,
            show: true,
            textStyle: {
              color: '#888',
              // fontFamily: "DINAlternate-Bold",
              fontSize: 12
            }
          }
        },
        yAxis: [
          {
            show: false,
            name: that.name1,
            type: 'value',
            // 设置网格线颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed'
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#555555',
                fontFamily: 'DINAlternate-Bold',
                fontSize: 16
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#666', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            }
          },
          {
            name: that.name2,
            show: false,
            // nameLocation: "start",
            type: 'value',
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed'
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#555555',
                fontFamily: 'DINAlternate-Bold',
                fontSize: 16
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#666', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            }
          }
        ],
        series: [
          {
            name: that.name1,
            symbol: 'none', //去掉折线上的小圆点
            data: that.y1Data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 6, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#FED1B4'
                  },
                  {
                    offset: 1,
                    color: '#FAFAFB'
                  }
                ])
              }
            },
            color: '#fd7f2c',
            // itemStyle: {
            //   normal: {
            //     color: "rgba(253,127,44,0.36)", //改变折线点的颜色
            //     shadowBlur: 16,
            //     shadowColor: "#fd7f2c",
            //     lineStyle: {
            //       color: "#fd7f2c", //改变折线颜色
            //       width: 3,
            //     },
            //   },
            // },
            yAxisIndex: 0
          },
          {
            name: that.name2,
            symbol: 'none',
            data: that.y2Data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 5, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#ACCFFF'
                  },
                  {
                    offset: 1,
                    color: '#FAFAFB'
                  }
                ])
              }
            },
            color: '#2781FF',
            // itemStyle: {
            //   normal: {
            //     color: "rgba(23,121,255,0.36)", //改变折线点的颜色
            //     shadowBlur: 16,
            //     shadowColor: "#1779ff",
            //     lineStyle: {
            //       color: "#1779ff", //改变折线颜色
            //       width: 3,
            //     },
            //   },
            // },
            yAxisIndex: 1
          }
        ]
      };
      myChart1.setOption(option);
      myChart1.setOption({
        graphic: {
          type: 'image',
          bounding: 'raw',
          top: '60%',
          left: '15%'
          // style: {
          //   image:
          //     "",
          //   width: "147",
          //   height: "32",
          // },
        }
      });
      /*窗口自适应，关键代码*/
      setTimeout(function () {
        window.addEventListener('resize', function () {
          myChart1.resize();
        });
      }, 200);
    }
  }
};
</script>
<style lang='less' scoped>
#category {
  width: 100%;
  height: 100%;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>
